<template>
	<view class="orderhistory">
		<u-navbar title="我的订单" :title-size="35" :title-bold="true" :immersive="true" :background="background" :is-back="false"
			:border-bottom="false"></u-navbar>
		<view class="shell" v-for="item in OrderList">
			<view class="order" style="margin-top:20rpx;">
				<view class="order-code">
					{{item.f_start_time}}
				</view>
				<view class="state">
					{{item.f_wx_no}}
				</view>
			</view>
			<view class="order">
				<view class="order-code"
					style="color:#000000; width: 400rpx; font-size: 26rpx;font-family: PingFang SC;font-weight: bold; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
					{{item.has_shop.f_address}}
				</view>
				<view class="state" v-if="item.f_status == 0"
					style="color:#000000; font-size: 26rpx;font-family: PingFang SC;font-weight: bold;">
					未支付
					<!-- <button class="btn" v-if="item.f_status == 1" @click="completeOrder">完成订单</button> -->
				</view>
				<view class="state" v-if="item.f_status == 1"
					style="color:#000000; font-size: 26rpx;font-family: PingFang SC;font-weight: bold;">
					<view class="btn" style="color: #ff8200; border: 1px solid #ff8200;" @click="completeOrder(item)">结算订单</view>
				</view>
				<view class="state" v-if="item.f_status == 2"
					style="color:#000000; font-size: 26rpx;font-family: PingFang SC;font-weight: bold;">
					<view class="btn"  @click="orderDetails(item)">订单详情</view>
				</view>
			</view>
			<view class="order">
				<view class="order-code"
					style="width: 150rpx;font-size: 26rpx;font-family: PingFang SC;font-weight: 500;color: #333333;">
					{{countdown(item.f_use_long)}}

				</view>
				<view class="state" style="font-size: 34rpx;font-family: PingFang SC;font-weight: 500;color: #03CC6D;"  v-if="item.f_status == 1">
					{{item.f_pay_money}}
				</view>
				<view class="state" style="font-size: 34rpx;font-family: PingFang SC;font-weight: 500;color: #03CC6D;"  v-if="item.f_status == 2">
					-{{item.f_pay_money}}
				</view>
			</view>
		</view>
		<view style="width: 100%; height: 20px;">
			<u-tabbar v-model="current1" :list="list"></u-tabbar>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			OrderList: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				list: [{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/userhome-grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/userhome.png",
						text: '首页',
						customIcon: false,
						pagePath: '/pages/index/index',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/orderindex_grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/orderindex.png",
						text: '订单',
						customIcon: false,
						pagePath: '/pages/Ewm/Ewm',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/usermassage-grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/usermassage.png",
						text: '消息',
						customIcon: false,
						pagePath: '/pages/message/message',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/usermain-grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/usermain.png",
						text: '我的',
						isDot: false,
						customIcon: false,
						pagePath: '/pages/main/main',
					},
				],
				current1: 0,
				OrderList: {},
				loadstatus: 'more',
				timestamp: 86400,
				isRefresh: 0,
				page: 1,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "亲，我是有底线的哦~"
				},
			}

		},
		onPullDownRefresh() {
			this.isRefresh = 1;
			this.loadstatus = 'more';
			this.page = 1;
			this.order();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			if (this.loadstatus !== 'more') {
				return;
			}
			this.loadstatus = '加载中...';
			this.isRefresh = 0;
			this.order()
		},
		onLoad() {
			this.isRefresh = 1;
			this.order()

		},
		created() {
			this.isRefresh = 1;
			this.order()
		},
		onShow() {
			this.page = 1;
			this.order()
		},
		methods: {
			countdown(time) {
				const that = this
				let day = parseInt(time / 60 / 60 / 24)
				let hr = parseInt(time / 60 / 60 % 24)
				let min = parseInt(time / 60 % 60)
				let sec = parseInt(time % 60)
				day = day > 9 ? day : '0' + day
				hr = hr > 9 ? hr : '0' + hr
				min = min > 9 ? min : '0' + min
				sec = sec > 9 ? sec : '0' + sec
				let newhr = parseInt(hr) + parseInt(day * 24)
				return `${hr}:${min}:${sec}`
			},

			//订单接口
			order() {
				this.$Api.myOrderList({
					userId: uni.getStorageSync('userid'),
					// userId: 154,
					pageNum: 15,
					page: this.page,
				}).then(res => {
					// this.OrderList = res.data.data.list

					if (res.data.data.list.length > 0) {
						if (this.isRefresh) {
							this.OrderList = res.data.data.list;
						} else {
							this.OrderList = this.OrderList.concat(res.data.data.list);
						}
						if (res.data.data.list.length != 15) {
							this.loadstatus = '到底了...';
						} else {
							this.loadstatus = 'more';
							this.page++;
						}
					} else {
						this.loadstatus = '到底了...';
					}
				}, err => {})
			},
			getGoodsList() {
				let page = this.page;
				let type = 'news';
				let searchValue = this.searchValue;
				getGoodsList({
					page,
					type,
					searchValue
				}).then(res => {
					if (res.code == 1) {
						if (res.data.list.length > 0) {
							if (this.isRefresh) {
								this.goodsList = res.data.list;
							} else {
								this.goodsList = this.goodsList.concat(res.data.list);
							}
							if (res.data.list.length != 15) {
								this.loadstatus = '到底了...';
							} else {
								this.loadstatus = 'more';
								this.page++;
							}
						} else {
							this.loadstatus = '到底了...';
						}
					} else {
						this.loadstatus = '到底了...';
					}
				}).catch(() => {
					this.loadstatus = '到底了...';
				});
			},

			//优惠券列表
			Coupons() {
				this.$Api.myCoupons({
					type: 1,
					userId: uni.getStorageSync('userid'),
					status: this.current
					// orderId: 15,
				}).then(res => {
					this.CouponList = res.data.data
					console.log(this.CouponList, '我是优惠券列表')
				}).catch(res => {

				})
			},
			orderDetails(item) {
				console.log(item, '订单item')
				uni.navigateTo({
					url: '/pagesB/orderDetails/orderDetails?id=' + item.id + '&shopid=' + item.f_shop_id+ '&f_use_long=' + item.f_use_long+ '&f_wx_no=' + item.f_wx_no
				})
				// uni.reLaunch({
				// 	url: '/pagesB/orderDetails/orderDetails?id=' + item.id + '&shopid=' + item.f_shop_id+ '&f_use_long=' + item.f_use_long+ '&f_wx_no=' + item.f_wx_no
				// })
			},
			completeOrder(item) {
				console.log(item, '订单item')
				uni.navigateTo({
					url: '/pagesB/settle/settle?id=' + item.id + '&shopid=' + item.f_shop_id+ '&f_use_long=' + item.f_use_long
				})
			}

		}
	}
</script>

<style lang="scss">
	// page {
	// 	background-image: url('https://gongxiangtaiqiu.axa2.com/taiqiu/bg.png');
	// 	padding-top: 200rpx;
	// }

	.orderhistory {
		background-image: url('https://gongxiangtaiqiu.axa2.com/taiqiu/bg.png');
		padding-top: 200rpx;
	}

	.shell {
		width: 690rpx;
		height: 160rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: auto;

		.order {
			width: 620rpx;
			height: 47rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: auto;

			.order-code {
				// width: 278rpx;
				// height: 26rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;

			}

			.state {
				// width: 110rpx;
				height: 26rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;

				.btn {
					width: 150rpx;
					height: 40rpx;
					font-size: 23rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					    border: 1px solid #19c865;
					    color: #19c865;
					    border-radius: 20px;
						background: #ffffff;
				}
			}


		}
	}
</style>

<!-- <template>
	<view>
		<view class="u-page">
			<view class="shell">
				<u-navbar title="扫码开台" :title-size="35" :title-bold="true" :immersive="true" :background="background"
					:is-back="false" :border-bottom="false"></u-navbar>
				<view class="center">
					<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/ewm.png" style="width:100%;height: 100%;"></image>
				</view>
			</view>
			<view class="btn" @click="scanStart">
				<view class="btn-p">
					扫码
				</view>
			</view>
		</view>
		<view style="width: 100%; height: 20px;">
			<u-tabbar v-model="current1" :list="list"></u-tabbar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/userhome-grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/userhome.png",
						text: '首页',
						customIcon: false,
						pagePath: '/pages/index/index',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/saoma_grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/saoma.png",
						text: '扫码',
						customIcon: false,
						pagePath: '/pages/Ewm/Ewm',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/usermassage-grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/usermassage.png",
						text: '消息',
						customIcon: false,
						pagePath: '/pages/message/message',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/usermain-grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/usermain.png",
						text: '我的',
						isDot: false,
						customIcon: false,
						pagePath: '/pages/main/main',
					},
				],
				current1: 0,
				qr:'',
			};
		},
		methods: {
			scanStart() {
				let that = this;
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['barCode', 'qrCode'],
					success: function(res) {
						console.log('条码',res.path.split("=")[1]);
						that.qr = res.path.split("=")[1]
						that.$Api.getEqInfoForCode({
							code: that.qr,
						}).then(res => {
							if(res.data.code == 0){
								uni.reLaunch({
									url:'/pagesB/beginbilliards/beginbilliards?scene='+that.qr
								})
							}
							console.log(res, '获取设备成功')
						}, err => {})
					},
					complete: function(res) {
						


					},
					fail: function(res) {

					}

				});
			}

		},
		mounted() {

		}
	}
</script>

<style lang="scss">
	.shell {
		width: 100%;
		height: 900rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 200rpx;

		.center {
			width: 460rpx;
			height: 600rpx;
		}

	}

	.btn {
		width: 690rpx;
		height: 88rpx;
		background: #222222;
		border-radius: 44rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		margin: auto;

		.btn-p {
			// width: 58rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #02FF83;
			line-height: 72rpx;
		}
	}
</style>
 -->